<template>
  <div class="player-page">
    <div class="nav-bar">
      <button @click="videoStore.setCurrentPage('search')">
        返回搜索页面
      </button>
    </div>
    <div class="main-content">
      <div class="main-panel">
        <video-player ref="videoPlayerRef" />
      </div>
      <div class="right-panel">
        <tag-manager @edit-tag="handleEditTag" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useVideoStore } from '../stores/videoStore'
import VideoPlayer from './VideoPlayer.vue'
import TagManager from './TagManager.vue'

const videoStore = useVideoStore()
const videoPlayerRef = ref(null)

const handleEditTag = (tag) => {
  videoStore.startEditing({
    id: tag.id,
    description: tag.name,
    color: tag.color
  })
}
</script>

<style scoped>
.player-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.nav-bar {
  padding: 10px;
  background: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

.nav-bar button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #1976d2;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s;
}

.nav-bar button:hover {
  background: #1565c0;
}

.main-content {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 300px;
  overflow: hidden;
}

.main-panel {
  background-color: white;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.right-panel {
  border-left: 1px solid #ddd;
  background-color: white;
  overflow: hidden;
}
</style> 